<template>
  <div class="scenicGuideDescWrapper">
    <v-header :title="title">
    </v-header>
    <scroll ref="scroll" style="overflow: hidden;height: 100%"
          :style="{height: scrollHeight + 'px'}">
        <div v-for="(item, index) in guideInfo" :key="index">
            <div class="topWrapper">
            <div class="teacherTop">
                <img :src="backImageTop" alt="">
            </div>
            <div class="headImageWrapper">
                <div class="topHeadImage">
                    <img :src="item.imgUrl" alt="">
                </div>
                <div class="headImageText">{{item.tourName}}</div>
            </div>
            </div>
            <div class="baseInfoWrapper">
                <div class="baseInfoTotle">
                    <h3>基础信息</h3>
                </div>
                <div class="infoText">
                    <div>姓名：{{item.tourName}}</div>
                    <div>性别：{{item.sex === 1 ? '男' : '女'}}</div>
                </div>
                <div class="infoText">
                    <div>年龄：{{item.age}}</div>
                    <div>籍贯：{{item.area.substring(0, 3)}}</div>
                </div>
            </div>
            <div class="guideInfoWrapper">
                <div class="baseInfoTotle">
                    <h3>导游信息</h3>
                </div>
                <div class="infoText">
                    <div>所负责景区：{{item.scenicNames}}</div>
                </div>
                <div class="infoText">
                    <div>语言：{{item.language}}</div>
                    <div>价格：￥{{item.price}}</div>
                </div>
                <div class="infoText">
                    <div>综合评分：{{item.level}}分</div>
                </div>
                <div class="infoText">
                    <div>个人简介：{{item.desc}}</div>
                </div>
            </div>
        </div>
    </scroll>
    <div class="buttonWrapper">
        <button class="btn" @click="handleGuideOrder()">立即订购</button>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import guideImage from '@/assets/img/default_avatar.png'
import imageTopBackround from '@/assets/img/myhome/my_top.png'
import Scroll from '@/components/scroll/scroll'
import { localUser } from '@/assets/js/local'
import axios from '@/api/axiosApi'

export default {
  data () {
    return {
      title: '导游详情',
      imageUrl: guideImage,
      backImageTop: imageTopBackround,
      scrollHeight: '500',
      guideInfo: [],
      userId: null
    }
  },
  directives: {
  },
  components: {
    VHeader,
    Scroll
  },
  computed: {
  },
  created() {
    this.userId = localUser.get('id')
    this.guideId = this.$route.params.id
    this.getGuideInfo(this.guideId)
  },
  mounted() {
    this.scrollHeight = window.innerHeight - 64 - 50
  },
  methods: {
    // 获取导游详细资料
    getGuideInfo (id) {
      axios.get(this, '/v1/tourismGuideOrder/getTourismGuideOrder', {id: id}, (data) => {
        data.forEach(element => {
          element.age = new Date().getFullYear() - element.birthday.substring(0, 4)
        })
        this.guideInfo = data
      })
    },
    handleGuideOrder () {
      if (this.userId == null) {
        this.$vux.toast.text('你还没有登录哦')
        return
      }
      this.$store.commit('SET_SELECTED_GUIDE', {
        guide: this.guideInfo[0]
      })
      this.$router.push('/scenicGuideOrder')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.scenicGuideDescWrapper {
    .topWrapper {
        .teacherTop img {
            width: 100%;
            height: 190px;
            opacity 0.7
        }

        .headImageWrapper {
            position: absolute;
            top: 25px;
            width: 100%;
            text-align: center;
        }
        .topHeadImage {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto;
        }

        .topHeadImage img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .headImageText {
            margin-top: 10px;
            color white
        }
    }
    .baseInfoWrapper {
        margin-top -5px
        background-color white
        .baseInfoTotle {
            padding 5px 20px
            border-bottom-style solid
            border-width:1px
            border-color: #E4E4E4
        }
        .infoText {
            font-size 15px
            padding 5px 20px
            display flex
            justify-content space-between
        }
    }
    .guideInfoWrapper {
        margin-top 10px
        background-color white
        .baseInfoTotle {
            padding 5px 20px
            border-bottom-style solid
            border-width:1px
            border-color: #E4E4E4
        }
        .infoText {
            font-size 15px
            padding 5px 20px
            display flex
            justify-content space-between
        }
    }
    .buttonWrapper {
        text-align right
        line-height 50px
        width 100%
        height 50px
        background-color white
        position absolute
        bottom 0
        .btn {
            color: $color-theme;
            padding 8px 15px
            border: solid 1px #00ceb9;
            border-radius 3px
            background-color: #fff;
            margin-right 20px
        }
    }
}
</style>
